import React, { memo, useState, useRef, useEffect } from 'react'
import type { FC, ReactNode, ElementRef } from 'react'
import { Carousel } from 'antd'
// import type { CarouselRef } from 'antd/es/carousel'
import { BannersWrapper, ImgBox, DowloadImg } from './style'
interface IProps {
  children?: ReactNode
  bannerList: any[]
}

const Banners: FC<IProps> = (props) => {
  const { bannerList } = props
  const [bgImg, setBgImg] = useState('')
  // 给组件绑定ref  固定写法ElementRef<typeof 组件名>
  const carouselRef = useRef<ElementRef<typeof Carousel>>(null)
  useEffect(() => {
    setBgImg(bannerList[0]?.imageUrl)
  }, [])
  const beforeChange = (from: number, to: number) => {
    setBgImg(bannerList[to].imageUrl)
  }

  return (
    <BannersWrapper bgImg={bgImg}>
      {/* 左箭头 */}
      <div
        className="arrow left_arrow"
        onClick={() => carouselRef.current?.prev()}
      ></div>
      {/* 轮播图 */}
      <Carousel ref={carouselRef} beforeChange={beforeChange}>
        {bannerList?.map((item) => {
          return (
            <ImgBox key={item.encodeId}>
              <img src={item.imageUrl} alt="" />
            </ImgBox>
          )
        })}
      </Carousel>
      {/* 下载图片 */}
      <DowloadImg></DowloadImg>
      {/* 右箭头 */}
      <div
        className="arrow right_arrow"
        onClick={() => carouselRef.current?.next()}
      ></div>
    </BannersWrapper>
  )
}

export default memo(Banners)
